<template>
	<text class="page-title">全部订单</text>
	<view class="list">
		<view class="item" v-for="(item,index) in orderList" :key="index" @click="bindProxyInfo(item)">
			<view class="header">
				<text class="title">代驾订单</text>
				<text class="status" v-if="item.orderStatus==3">已取消</text>
				<text class="status" v-if="item.orderStatus==2">待支付</text>
				<text class="status" v-if="item.orderStatus==1">已完成</text>
				<text class="status" v-if="item.orderStatus==4">退款中</text>
				<text class="status" v-if="item.orderStatus==5">已退款</text>
			</view>
			<view class="content">
				<view class="item-c" style="margin-top: 48rpx;" >
					<text class="unit"></text>
					<text class="value slh" >出发地：{{item.startPosition}}</text>
				</view>
				<text class="line"></text>
				<view class="item-c" >
					<text class="unit" style="background-color: #2B2B2B;"></text>
					<text class="value slh" style="color: #FE9C24;">目的地：{{item.endPosition}}</text>
				</view>
			</view>
			<view class="bottom">
				<view class="left">
					<view class="">
						<text>预付</text>
						<text style="color: #F13D3D;font-weight: bold;">{{item.payAmount/100}}元</text>
					</view>
					<text>下单时间：{{item.createdTime}}</text>
				</view>
				
				<button class="btn" v-if="item.orderStatus==2" @click="pay(item)">立即支付</button>
			</view>
		</view>
		<uni-empty v-if="emptyState==2"></uni-empty>
	</view>
</template>

<script setup>
	import {
		orderDriver,
		getSignupWeixin
	} from '@/api'
	import {
		onLoad,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import {wxOpenid} from '@/utils/login-sdk.js'
	import { ref } from 'vue';
	const emptyState = ref(0)
	let bok = true
	const queryParams = ref({
		page:"1",
		pageSize:"10",
		memberId:"",
	})
	onShow(async()=>{
		const { memberId } = await wxOpenid()
		queryParams.value.memberId = memberId
		getData()
	})
	onReachBottom(()=>{
		queryParams.value.page++
		getData()
	})
	const orderList = ref([])
	const getData = async()=>{
		const res = await orderDriver(queryParams.value)
		
		if(queryParams.value.page==1){
			orderList.value = res.result.list
		}else{
			orderList.value = orderList.value.concat(res.result.list)
		}
		if(orderList.value.length){
			emptyState.value = 1
		}else{
			emptyState.value = 2
		}
	}
	const pay = async(item)=>{
		if(!bok) return false
		bok = false
		const {
			openId
		} = await wxOpenid()
		const res = await getSignupWeixin({
			orderId: item.id,
			payAmount: item.payAmount,
			wxOpenId: openId
		})
		wx.requestPayment({
			timeStamp: res.result.sdk_timestamp,
			nonceStr: res.result.sdk_noncestr,
			package: res.result.sdk_package,
			signType: res.result.sdk_signtype,
			paySign: res.result.sdk_paysign,
			success(res) {
				bok = true
				getData()
			},
			fail(res) {
				bok = true
				uni.showToast({
					title: '支付取消',
					icon: "none"
				})
			}
		})
	}

	const bindProxyInfo = (item)=>{
		uni.navigateTo({
			url:'/pages/proxyInfo/proxyInfo?id='+item.id
		})
	}
</script>

<style lang="scss">
	page{
		background: #F7F4F0;
	}
	.page-title{
		display: block;
		margin: 52rpx 0 0 42rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #2B2B2B;
	}
	.list{
		.item{
			width: 638rpx;
			padding: 40rpx 32rpx;
			background: #FFFFFF;
			border-radius: 28rpx;
			margin: 24rpx auto;
			.header{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title{
					font-size: 28rpx;
					color: #2B2B2B;
				}
				.status{
					color: #EF3C3C;
					font-size: 28rpx;
				}
			}
			.content{
				width: 638rpx;
				height: 245rpx;
				background: #F6F6F6;
				border-radius: 28rpx;
				margin: 35rpx auto 0;
				overflow: hidden;
				.line{
					width: 2rpx;
					height: 62rpx;
					background: #FE9C24;
					margin: 12rpx 0;
					display: block;
					margin-left: 34rpx;
				}
				.item-c{
					display: flex;
					align-items: center;
					.unit{
						width: 12rpx;
						height: 12rpx;
						background: #FE9C24;
						border-radius: 50%;
						display: block;
						margin-left: 30rpx;
					}
					.value{
						font-weight: bold;
						font-size: 30rpx;
						color: #2B2B2B;
						margin-left: 20rpx;
						width: 500rpx;
					}
				}
			}
			.bottom{
				display: flex;
				margin-top: 28rpx;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				.left{
					>view{
						margin-right: 42rpx;
						display: flex;
						text{
							font-size: 30rpx;
							color: #2B2B2B;
						}
					}
					>text{
						margin-right: 42rpx;
						font-size: 20rpx;
						color: #979797;
						
					}
				}
				.btn{
					width: 184rpx;
					height: 74rpx;
					border-radius: 36rpx;
					border: 2px solid #FE9C24;
					background: #fff;
					font-size: 30rpx;
					color: #FE9C24;
					line-height: 74rpx;
					margin: 0;
				}
			}
		}
	}
</style>
